<template>
  <el-card class="box-card" ref="datasetlist">
    <div slot="header" class="clearfix">
      <span>我创建的训练任务</span>
      <el-button style="float: right; padding: 1px 0px; height: 35px; width: 80px" type="primary" @click="createTrainjob()">创建训练</el-button>
    </div>
    <div class="contenttable">
      <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="名称">
      </el-table-column>
      <el-table-column
        prop="version"
        label="版本">
      </el-table-column>
      <el-table-column
        prop="datetime_started"
        label="开始时间">
      </el-table-column>
      <el-table-column
        prop="datetime_stopped"
        label="结束时间">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态">
      </el-table-column>
      <el-table-column label="操作">
      <template slot-scope="scope">
          <el-tooltip class="item" effect="light" content="查看" placement="top">
          <el-button type="primary" icon="el-icon-search" circle @click="showTrainjobDetail(scope.row.id)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="停止" placement="top">
          <el-button type="danger" icon="el-icon-video-pause" circle @click="stopTrainjobProcess1(scope.row.id, scope.row.name)" v-show="scope.row.status==='RUNNING'"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <el-dialog
     title="提示"
     :visible.sync="stopData.stopDialogVisible"
     width="30%"
     :before-close="handleClose">
      <span>是否停止训练任务{{stopData.stopName}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="stopData.stopDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="stopTrainjobProcess2()">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>
<script>
import { getTrainjobList, stopTrainjob } from '@/api/request/trainjob'
// import { searchUsers } from '@/api/request/user'
// import store from '@/store/store'
export default {
  data () {
    return {
      tableData: null,
      //   title: '我创建的数据集'
      stopData: {
        stopDialogVisible: false,
        stopID: '',
        stopName: ''
      }
    }
  },
  methods: {
    update () {
      getTrainjobList().then(response => {
        this.tableData = response
      })
    },
    showTrainjobDetail (id) {
      this.$router.push({path: '/trainjob/detail', query: {trainjob_id: id}})
    },
    stopTrainjobProcess1 (id, name) {
      this.stopData.stopDialogVisible = true
      this.stopData.stopID = id
      this.stopData.stopName = name
    },
    stopTrainjobProcess2 () {
      this.stopData.stopDialogVisible = false
      stopTrainjob({trainjob_id: this.stopData.stopID, status: 'STOPPED'}).then(response => {
        this.update()
      })
    },
    createTrainjob () {
      this.$router.push('/trainjob/create')
    }
  },
  activated () {
    this.update()
  }
}
</script>
<style scoped>
  .itemgrant {
    margin-left: 1px;
    margin-bottom: 18px;
  }
  .contenttable {
    margin: 20px;
  }
  .el-card__header {
    padding: 18px 20px;
    background-color: rgb(238, 241, 246);
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
</style>
